<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<div th:fragment="indexContent">

<div class="articles" >
        <header>
          <h3 class="title-head">最新发布</h3>
        </header>
        <!--  开始-->
        <script type="text/html" id="lasted">
          <div class="article">
              <div class="article-right">
                  <div class="article-title">
                      <p>{{create_time}} <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>{{count}} </a><a class="span_link" href="#"><span class="glyphicon glyphicon-thumbs-up"></span>{{mark}}</a></p>
                      <a class="title" href="/main/paper/{{id}}"> {{title}}</a>
                      <p>{{segment}}</p>
                  </div>
              </div>
           
              <div class="clearfix"></div>
          </div>
        </script>
        <script type="text/javascript">
            var h2 ='';
            $(document).ready(function () {
                var url = '/main/paper/PapersByTime';
                $.ajax( {
                    type : "post",
                    dataType:"json",
                    url : url,
                    timeout : 20000,
                    cache : false,
                    success : function(data) {
                        var i;
                        var j;
                        for(i in data.paper){
                            h2 = template('lasted', data.paper[i])+h2;
                        }
                        document.getElementById('lastedContent').innerHTML = h2;
                    }

                });
            })
        </script>
        <div class="popular-grids">
          <div id="lastedContent"></div>
        </div>
        <!-- 结束-->
      </div>

<div class="sports-top">
            <div class="s-grid-left">
              <div class="cricket">
                <header>
                  <h3 class="title-head">最新评论</h3>
                </header>

                  <!--  开始-->
                  <script type="text/html" id="comment">
                      <div class="s-grid-small">
                          <div class="sc-image">
                              <a href="/main/paper/{{id}}"><img src="{{paper_image}}" alt="" /></a>
                          </div>
                          <div class="sc-text">
                              <h5>{{title}}</h5>
                              <b class="power">{{comments_user_name}} Ref: {{comments_content}}</b>
                              <p class="date">{{comments_time}}</p>
                              <a class="reu" href="/main/paper/{{id}}">该文章更多新评<img src="images/more.png" alt="" /></a>
                              <div class="clearfix"></div>
                          </div>
                          <div class="clearfix"></div>
                      </div>

                  </script>
                  <script type="text/javascript">
                      var comment ='';
                      $(document).ready(function () {
                          var url = '/main/comments/commentsWithPaperAndUserMes';
                          $.ajax( {
                              type : "post",
                              dataType:"json",
                              url : url,
                              timeout : 20000,
                              cache : false,
                              success : function(data) {
                                  var i;
                                  var j;
                                  for(i in data.comments){
                                      comment = template('comment', data.comments[i])+comment;
                                  }
                                  document.getElementById('commentsContent').innerHTML = comment;
                              }

                          });
                      })
                  </script>
                  <div id="commentsContent"></div>
                  <!-- 结束-->
              </div>
            </div>

            <div class="s-grid-right">
              <div class="cricket">
                <header>
                  <h3 class="title-popular">热门主题</h3>
                </header>

                  <!--  开始-->
                  <script type="text/html" id="column">
                      <div class="s-grid-small">
                          <div class="sc-image">
                              <a href="/main/columnItem/{{id}}"><img src="{{image}}" height="120px" alt="" /></a>
                          </div>
                          <div class="sc-text">
                              <h5>{{title}}</h5>
                              <p class="date">{{c_create_time}}</p>
                              <a class="reu" href="/main/columnItem/{{id}}"><img src="images/more.png" alt="" /></a>
                              <div class="clearfix"></div>
                          </div>
                          <div class="clearfix"></div>
                      </div>

                  </script>
                  <script type="text/javascript">
                       h ='';
                      $(document).ready(function () {
                          var url = '/main/column/findColumByCount';
                          $.ajax( {
                              type : "post",
                              dataType:"json",
                              url : url,
                              timeout : 20000,
                              cache : false,
                              success : function(data) {

                                  // alert(data.colum[1].c_create_time)
                                  var i;
                                  var j;
                                  for(i in data.colum){
                                      h = template('column', data.colum[i])+h;
                                  }
                                  document.getElementById('themeContent').innerHTML = h;
                              }

                          });
                      })
                  </script>
                  <div id="themeContent"></div>
                  <!-- 结束-->
              </div>
            </div>
              <!--</div>-->
              <!--<div class="clearfix"></div>-->
            <!--</div>-->
</div>
<div class="clearfix"></div>
<!-- content-section-ends-here -->
</div>
<!--</body>-->
</html>
